@use "@/common/styles/colors"

.login-dialog
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  gap: 1rem
  user-select: none
  margin: 1rem 1.5rem

.login-logo
  display: flex
  align-items: center
  gap: 1rem

  img
    width: 3rem
    height: 3rem

  h1
    margin: 0

.login-form
  display: flex
  flex-direction: column
  gap: 1rem

  .register-name-row
    display: flex
    width: 24rem
    gap: 1rem

    input
      width: 100%

  .form-group
    display: flex
    flex-direction: column
    gap: 0.3rem

    label
      color: colors.$subtext
      font-weight: 600

  .sso-options
    display: flex
    flex-direction: column
    gap: 1rem
    width: 100%

    .divider
      display: flex
      align-items: center
      text-align: center
      color: colors.$subtext
      font-size: 0.9rem
      margin: 1rem 0

      &::before,
      &::after
        content: ""
        flex: 1
        border-bottom: 1px solid colors.$subtext
        margin: 0 10px

    .sso-buttons
      display: flex
      flex-direction: column
      gap: 0.5rem
      width: 100%